<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">账号绑定编辑</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
            <el-button
                class="btn-success width100"
                type="primary"
                @click="submitForm()"
            >提交</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="mt30">
        <el-row>
          <el-col :span="12">
            <el-form-item label="租户账号:" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入租户账号"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码:" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地址:" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人:" prop="contacts">
              <el-input v-model="form.contacts" placeholder="请输入联系人"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称:" prop="corporateName">
              <el-input v-model="form.corporateName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { edit, detail } from "@/api/system/dealerBinding/dealerBinding"
export default {
  name: "edit",
  data() {
    return {
      form: {
        userName: '', // 租户账号
        password: '', // 密码
        address: '', // 地址
        phone: '', // 联系电话
        contacts: '', // 联系人
        corporateName: '', // 公司名称
        remark: '', // 备注
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "租户账号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
          // { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        corporateName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详细信息
    getDetailData() {
      detail(this.id).then(res => {
        if(res.code == 200){
          this.form = res.data
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading("正在提交")
          edit(this.form).then(res => {
            if(res.code == 200){
              this.$modal.closeLoading()
              this.$tab.closeOpenPage({ path: "/dealerBinding/list" })
              this.$modal.msgSuccess("编辑成功!")
            }
          })
        }
      })
    }
  }
};
</script>
